<template>
  <div class="analyze-data">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/serviceTools/behaviorAnalysis' }"
          >行为分析</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ pageName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="data-content">
      <div class="left-content">
        <div class="top">
          <div class="name">{{ pageName }}</div>
          <div class="filter-condition">
            <div>
              <span>时间</span>
              <el-date-picker
                v-model="form.searchTime"
                value-format="yyyy-MM-dd"
                @change="actDetailListFn"
              >
              </el-date-picker>
              <!-- <span style="margin-left:10px">粒度</span>
              <el-select v-model="granularity" placeholder="请选择">
                <el-option
                  v-for="item in granularityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
            </div>
          </div>
        </div>
        <!-- <div class="middle">
          <div class="middle-name">
            数据总览
            <i class="el-icon-question"></i>
          </div>
          <div class="middle-content">
            <div class="middle-left">
              <div
                class="title-box"
                v-for="(item, index) in middleLeftTitle"
                :key="index"
              >
                <div
                  class="color-box"
                  :style="{ backgroundColor: item.color }"
                ></div>
                <div class="title-name">{{ item.name }}</div>
              </div>
            </div>
            <div class="middle-right">
              <StackedLineChart
                v-if="xData"
                :xData="xData"
                :buyPageData="buyPageData"
                :basicData="basicData"
                :buyPageName="buyPageName"
                :basicName="basicName"
              ></StackedLineChart>
            </div>
          </div>
        </div> -->
        <div class="bottom">
          <div class="bottom-name">
            数据详情
            <i class="el-icon-question"></i>
          </div>
          <el-table :data="tableData" style="width: 100%; margin-top: 12px">
            <!-- <el-table-column prop="time" label="时间" min-width="45%">
            </el-table-column>
            <el-table-column prop="buyPageNum" label="营销页-人数" min-width="45%">
            </el-table-column>
            <el-table-column prop="basicNum" label="基础监控-人数" min-width="10%">
            </el-table-column> -->
            <el-table-column prop="etName" label="事件名称" min-width="10%">
            </el-table-column>
            <el-table-column
              prop="jumpPersonName"
              label="来源用户姓名"
              min-width="15%"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.jumpPersonName || "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sourceTypeDesc"
              label="来源类型名称"
              min-width="10%"
            >
            </el-table-column>
            <el-table-column
              prop="cardTypeName"
              label="项目名称"
              min-width="10%"
            >
            </el-table-column>
            <el-table-column
              prop="jumpSourceDesc"
              label="来源名称"
              min-width="10%"
            >
            </el-table-column>
            <el-table-column prop="personName" label="用户姓名" min-width="10%">
            </el-table-column>
            <el-table-column
              prop="consultantName"
              label="顾问姓名"
              min-width="10%"
            >
            </el-table-column>
            <el-table-column
              prop="stayTime"
              label="用户停留时间"
              min-width="10%"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="pager">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
      <!-- <div class="right-content">
        <div class="title">事件指标</div>
        <div>营销页-人数</div>
        <div>基础监控-人数</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { actDetailList } from "@/api/index";

import StackedLineChart from "./components/StackedLineChart.vue";
export default {
  components: {
    StackedLineChart,
  },
  props: {},
  data() {
    return {
      total: 0,
      pageName: "未命名",
      selectDate: "",
      granularity: "",
      granularityOptions: [
        {
          value: 10,
          label: "天",
        },
        {
          value: 20,
          label: "周",
        },
        {
          value: 30,
          label: "月",
        },
      ],
      middleLeftTitle: [
        {
          name: "营销页-人数",
          color: "#26C689",
        },
        {
          name: "基础监控-人数",
          color: "#735AFF",
        },
      ],
      xData: [],
      buyPageData: [],
      basicData: [],
      buyPageName: "",
      basicName: "",
      tableData: [
        {
          time: "2024-03-21",
          buyPageNum: 10,
          basicNum: 10,
        },
        {
          time: "2024-03-21",
          buyPageNum: 10,
          basicNum: 10,
        },
        {
          time: "2024-03-21",
          buyPageNum: 10,
          basicNum: 10,
        },
        {
          time: "2024-03-21",
          buyPageNum: 10,
          basicNum: 10,
        },
        {
          time: "2024-03-21",
          buyPageNum: 10,
          basicNum: 10,
        },
        {
          time: "2024-03-21",
          buyPageNum: 10,
          basicNum: 10,
        },
        {
          time: "2024-03-21",
          buyPageNum: 10,
          basicNum: 10,
        },
      ],
      page: {
        currentPage: 1,
        pageSizes: 10,
        pageSize: 10,
      },
      form: {
        searchTime: "",
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.actDetailListFn();
    },
    async actDetailListFn() {
      const params = {
        currentStartTime: this.form.searchTime + " 00:00:00",
        currentEndTime: this.form.searchTime + " 23:59:59",
        pageNo: this.page.currentPage,
        pageSize: 10,
        etId: this.$route.params.etId,
      };
      const res = await actDetailList(params);
      if (res.code == 200) {
        console.log("res", res);
        this.tableData = res.data;
        this.total = res.pageparam.sums;
      }
    },
    initMyChart() {
      this.xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
      this.buyPageData = [120, 132, 101, 134, 90, 230, 210];
      this.basicData = [220, 182, 191, 234, 290, 330, 310];
      this.buyPageName = "营销页-人数";
      this.basicName = "基础监控-人数";
    },
  },
  created() {
    let isDate = new Date();
    let yesterday = new Date(isDate);
    yesterday.setDate(isDate.getDate() - 1);
    let sTime = `${yesterday.getFullYear()}-${
      yesterday.getMonth() + 1
    }-${yesterday.getDate()}`;
    sTime = `${sTime}`;
    this.form.searchTime = sTime; // 显示的默认时间
    this.pageName = this.$route.params.pageName;
    this.initMyChart();
    this.actDetailListFn();
  },
};
</script>

<style lang="scss" scoped>
.analyze-data {
  height: 100%;
  background: url("../../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 13px;

  .breadcrumb {
    height: 20px;
  }

  .data-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    height: calc(100% - 36px);

    .left-content {
      flex: 1;
      background: #f0f2f5;
      margin-right: 14px;
      padding: 8px;

      .top,
      .middle,
      .bottom {
        width: 100%;
        border-radius: 8px;
        background: #ffffff;
      }

      .top {
        height: 100px;
        padding: 24px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .name {
          font-weight: 800;
        }

        span {
          margin-right: 10px;
        }

        .filter-condition {
          /deep/ .el-range-editor.el-input__inner {
            height: 36px;
          }

          /deep/ .el-date-editor .el-range-separator {
            width: 10%;
            line-height: 28px;
          }

          /deep/ .el-date-editor .el-range__icon {
            display: none;
          }

          /deep/ .el-date-editor--daterange.el-input__inner {
            width: 250px;
          }
        }
      }

      .middle {
        padding: 16px;
        margin-top: 16px;
        height: 400px;

        .middle-name {
          color: #222222;
        }

        .middle-content {
          display: flex;
          flex-direction: row;
          height: 350px;
          padding: 32px 20px;
          box-sizing: border-box;
          justify-content: space-between;

          .middle-left {
            flex-basis: 200px;

            .title-box {
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-bottom: 12px;

              .color-box {
                border-radius: 50%;
                width: 16px;
                height: 16px;
                margin-right: 5px;
              }

              .title-name {
                color: "#22222";
                font-weight: 800;
                font-size: 14px;
              }
            }
          }

          .middle-right {
            flex: 1;
          }
        }
      }

      .bottom {
        padding: 16px;
        margin-top: 16px;

        .bottom-name {
          color: #222222;
        }
      }
    }

    .right-content {
      width: 205px;
      height: 155px;
      background: #ffffff;
      border-radius: 8px;
      padding: 16px 32px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      color: #222222;

      .title {
        font-size: 24px;
        font-weight: 800;
      }
    }
  }
}
</style>
